<template>
  <!-- 规格弹窗 -->
  <view style="padding: 10rpx 20rpx;">
    <view class="ss-m-b-20 label-text">选择科目（可多选）</view>
    <view class="ss-flex ss-flex-wrap sku-item ss-m-b-20" v-for="sku1 in goodsInfo.skus" :key="sku1.id">
      <template v-for="sku2 in sku1.children">
        <button
          class="ss-reset-button spec-btn"
          :class="[
            {
              'ui-BG-Main-Gradient':  state.self_selectskus.includes(sku2.id),
            },
            {
              'disabled-btn': sku2.disabled == true,
            },
          ]"
          :key="sku2.id"
          :disabled="sku2.disabled == true"
          @tap="onSelectSku(sku2.parent_id, sku2.id,sku2.name)"
          v-if="sku2.name.indexOf('全科') < 0"
        >
          {{ sku2.name }}
        </button>
      </template>

      <template v-for="sku2 in sku1.children">
        <button
          class="ss-reset-button spec-btn"
          
          :class="[
            {
              'ui-BG-Main-Gradient': state.self_selectskus.includes(sku2.id),
            },
            {
              'disabled-btn': sku2.disabled == true,
            },
          ]"
          :key="sku2.id"
          :disabled="sku2.disabled == true"
          @tap="onSelectSku(sku2.parent_id, sku2.id,sku2.name)"
          v-if="sku2.name.indexOf('全科') >= 0"
        >
          {{ sku2.name }}
        </button>
      </template>
    </view>
  </view>
</template>

<script setup>
  import { computed, reactive, watch } from 'vue';

  const emits = defineEmits(['change', 'selectChange']);
  const props = defineProps({
    goodsInfo: {
      type: Object,
      default() {},
    },
  });

  const state = reactive({
    selectedSkuPrice: {},
    currentSkuArray: [],
    self_selectskus:[],
    self_priceall:0,
    self_originalPriceAll:0,
  });


  // 默认单规格
  if (!props.goodsInfo.is_sku) {
    state.selectedSkuPrice = props.goodsInfo.sku_prices[0];
  }

  const skuList = props.goodsInfo.skus;
  // 可选规格
  const skuPrices = computed(() => {
    let skuPrices = props.goodsInfo.sku_prices;
    if (props.goodsInfo.is_sku) {
      skuPrices.forEach((item) => {
        item.goods_sku_id_arr = item.goods_sku_ids.split(',');
      });
    }
    return skuPrices;
  });

  watch(
    () => state.selectedSkuPrice,
    (newVal) => {
      emits('change', newVal);
    },
    {
      immediate: true, // 立即执行
      deep: true, // 深度监听
    },
  );

  watch(
    () => state.self_selectskus,
    (newVal) => {
      emits('selectChange', {
        originalPrice: state.self_originalPriceAll,
        price: state.self_priceall,
        skus: state.self_selectskus,
      });
    },
    {
      immediate: true,
      deep: true,
    },
  );

  // 改变禁用状态
  function changeDisabled(isChecked = false, pid = 0, skuId = 0) {
    let newPrice = []; // 所有可以选择的 skuPrice

    if (isChecked) {
      // 选中规格
      // 当前点击选中规格下的 所有可用 skuPrice
      for (let price of skuPrices.value) {
        if (price.stock <= 0) {
          // this.goodsNum 不判断是否大于当前选择数量，在 uni-number-box 判断，并且 取 stock 和 goods_num 的小值
          continue;
        }
        if (price.goods_sku_id_arr.indexOf(skuId.toString()) >= 0) {
          newPrice.push(price);
        }
      }
    } else {
      // 取消选中
      // 当前所选规格下，所有可以选择的 skuPrice
      newPrice = getCanUseSkuPrice();
    }

    // 所有存在并且有库存未选择的规格项 的 子项 id
    let noChooseSkuIds = [];
    for (let price of newPrice) {
      noChooseSkuIds = noChooseSkuIds.concat(price.goods_sku_id_arr);
    }

    // 去重
    noChooseSkuIds = Array.from(new Set(noChooseSkuIds));

    if (isChecked) {
      // 去除当前选中的规格项
      let index = noChooseSkuIds.indexOf(skuId.toString());
      noChooseSkuIds.splice(index, 1);
    } else {
      // 循环去除当前已选择的规格项
      state.currentSkuArray.forEach((sku) => {
        if (sku.toString() != '') {
          // sku 为空是反选 填充的
          let index = noChooseSkuIds.indexOf(sku.toString());
          if (index >= 0) {
            // sku 存在于 noChooseSkuIds
            noChooseSkuIds.splice(index, 1);
          }
        }
      });
    }

    // 当前已选择的规格大类
    let chooseSkuKey = [];
    if (!isChecked) {
      // 当前已选择的规格大类
      state.currentSkuArray.forEach((sku, key) => {
        if (sku != '') {
          // sku 为空是反选 填充的
          chooseSkuKey.push(key);
        }
      });
    } else {
      // 当前点击选择的规格大类
      chooseSkuKey = [pid];
    }

    for (let i in skuList) {
      // 当前点击的规格，或者取消选择时候 已选中的规格 不进行处理
      if (chooseSkuKey.indexOf(skuList[i]['id']) >= 0) {
        continue;
      }

      for (let j in skuList[i]['children']) {
        // 如果当前规格项 id 不存在于有库存的规格项中，则禁用
        if (noChooseSkuIds.indexOf(skuList[i]['children'][j]['id'].toString()) >= 0) {
          skuList[i]['children'][j]['disabled'] = false;
        } else {
          skuList[i]['children'][j]['disabled'] = true;
        }
      }
    }
  }

  // 当前所选规格下，获取所有有库存的 skuPrice
  function getCanUseSkuPrice() {
    let newPrice = [];

    for (let price of skuPrices.value) {
      if (price.stock <= 0) {
        // || price.stock < this.goodsNum		不判断是否大于当前选择数量，在 uni-number-box 判断，并且 取 stock 和 goods_num 的小值
        continue;
      }
      var isOk = true;

      state.currentSkuArray.forEach((sku) => {
        // sku 不为空，并且，这个 条 skuPrice 没有被选中,则排除
        if (sku.toString() != '' && price.goods_sku_id_arr.indexOf(sku.toString()) < 0) {
          isOk = false;
        }
      });

      if (isOk) {
        newPrice.push(price);
      }
    }

    return newPrice;
  }

  function removeElementByValue(value) {
    const index = state.self_selectskus.indexOf(value);
    if (index !== -1) {
      state.self_selectskus.splice(index, 1);
    }
  }

  //计算总价
  function sumallprice()
  {
    state.self_priceall=Number(0)
    state.self_originalPriceAll=Number(0)
    state.self_selectskus.forEach((sku) => {
      props.goodsInfo.sku_prices.forEach((item)=>{
        if(sku==item.goods_sku_ids)
        {
          state.self_priceall=Number(state.self_priceall)+Number(item.price);
          state.self_originalPriceAll=Number(state.self_originalPriceAll)+Number(item.original_price);
        }
      });
    });
  }
    // 选择规格
  function onSelectSku(pid, skuId,skuName) {
    // 清空已选择
    let isChecked = true; // 选中 or 取消选中

    if (state.self_selectskus.includes(skuId)) {
      // 点击已被选中的，删除并填充 ''
      isChecked = false;
      state.currentSkuArray.splice(pid, 1, '');
      removeElementByValue(skuId);
    } else {
      // 选中
      state.currentSkuArray[pid] = skuId;
    
      if(skuName.indexOf('全科')>=0)
      {
        state.self_selectskus=[];
      }
      else
      {
        state.self_selectskus.forEach((sku) => {
          props.goodsInfo.sku_prices.forEach((item)=>{
            if(sku==item.goods_sku_ids)
            {
              if(item.goods_sku_text[0].indexOf('全科')>=0)
              {
                removeElementByValue(sku);
              }
            }
          });
        });
      }
      state.self_selectskus.push(skuId)
    }
    sumallprice();

    let chooseSkuId = []; // 选中的规格大类
    state.currentSkuArray.forEach((sku) => {
      if (sku != '') {
        // sku 为空是反选 填充的
        chooseSkuId.push(sku);
      }
    });

    // 当前所选规格下，所有可以选择的 skuPric
    let newPrice = getCanUseSkuPrice();

    // 判断所有规格大类是否选择完成
    if (chooseSkuId.length == skuList.length && newPrice.length) {
      newPrice[0].goods_num = state.selectedSkuPrice.goods_num || 1;
      state.selectedSkuPrice = newPrice[0];
    } else {
      state.selectedSkuPrice = {};
    }
    // 改变规格项禁用状态
    changeDisabled(isChecked, pid, skuId);
  }

  changeDisabled(false);
</script>

<style lang="scss" scoped>
  .sku-item {
    gap: 5px;
  }

  // 购买
  .buy-box {
    padding: 10rpx 0;

    .add-btn {
      width: 356rpx;
      height: 80rpx;
      border-radius: 40rpx 0 0 40rpx;
      background-color: var(--ui-BG-Main-light);
      color: var(--ui-BG-Main);
    }

    .buy-btn {
      width: 356rpx;
      height: 80rpx;
      border-radius: 0 40rpx 40rpx 0;
      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
      color: #fff;
    }
    .score-btn {
      width: 100%;
      margin: 0 20rpx;
      height: 80rpx;
      border-radius: 40rpx;
      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
      color: #fff;
    }
  }

    .sku-image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 10rpx;
    }

    .header-right {
      height: 160rpx;
    }

    .close-icon {
      position: absolute;
      top: 10rpx;
      right: 20rpx;
      font-size: 46rpx;
      opacity: 0.2;
    }

    .goods-title {
      font-size: 28rpx;
      font-weight: 500;
      line-height: 42rpx;
    }
    .score-img {
      width: 36rpx;
      height: 36rpx;
      margin: 0 4rpx;
    }
    .score-text {
      font-size: 30rpx;
      font-weight: 500;
      color: $red;
      font-family: OPPOSANS;
    }
    .price-text {
      font-size: 30rpx;
      font-weight: 500;
      color: $red;
      font-family: OPPOSANS;
      &::before {
        content: '￥';
        font-size: 30rpx;
        font-weight: 500;
        color: $red;
      }
    }

    .stock-text {
      font-size: 26rpx;
      color: #999999;
    }

    .label-text {
      font-size: 26rpx;
      font-weight: 500;
      color: $dark-9;
    }

    .buy-num-box {
      height: 100rpx;
    }

    .spec-btn {
      height: 60rpx;
      min-width: 100rpx;
      padding: 0 30rpx !important;
      background: #f4f4f4;
      color: #434343;
      font-size: 26rpx;
      margin-right: 10rpx;
      margin-bottom: 10rpx;
    }

    .disabled-btn {
      font-weight: 400;
      color: #c6c6c6;
      background: #f8f8f8;
    }
</style>
